import { Button, Popconfirm, Table, Tag, Tooltip, TableProps } from 'antd';
import { memo, useRef, useState } from 'react';
import { SvgIcon } from '@/components/icon';
import NotData from '@/components/NotData';
import './styles/qa-list.scss';

import QAHtml from '../qa-html';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useSize } from 'ahooks';

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

interface DataType {
  id: string;
  q: string;
  a: string;
  status: number;
}
interface Props {
  datas: QA[];
  onEdit?: (data: QA) => void;
  onDelete?: (data: QA) => void;
}

const QAList = ({ datas, onEdit, onDelete }: Props) => {
  const ref = useRef<HTMLDivElement>(null);
  const size = useSize(ref);
  const width = size?.width || 0;
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange
  };



  const columns = [
    {
      title: '问题',
      dataIndex: 'q',
      key: 'q',
      render: (_, record: QA) => {
        return (
          <Tooltip title={record.q}>
            <div className="truncate" style={{ maxWidth: width * 0.2 }}>
              {record.q}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '答案',
      dataIndex: 'a',
      key: 'a',
      render: (_, record: QA) => {
        return (
          // style={{maxWidth: '500px'}}
          <div className="truncate" style={{ maxWidth: width - 340 }}>
            <QAHtml html={record.a} />
          </div>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, record: QA) => {
        console.log(record.status);

        return (
          // style={{maxWidth: '500px'}}

          <div className="truncate">
            {/* {record.status == 2 ? <Tag color='red'>重复数据</Tag> : <Tag color='green'>待导入</Tag>} */}
            {record.status == 2 ? <span style={{ color: 'red' }}>重复数据</span> : <span style={{ color: '#86909C' }}>待导入</span>}
          </div>
        );
      },
    },
    {
      title: '',
      dataIndex: 'actions',
      key: 'actions',
      width: '100px',
      render: (_, record: QA) => {
        return (
          <div className="flex">
            <Button
              type="text"
              icon={<EditOutlined />}
              onClick={() => {
                onEdit && onEdit(record);
              }}
            >
              编辑
            </Button>

            <Popconfirm
              title="确定要删除该问答对吗？"
              placement="topLeft"
              onConfirm={() => {
                onDelete && onDelete(record);
              }}
              okText="Yes"
              cancelText="No"
            >
              <Button danger type="text">
                <SvgIcon icon="delete-icons" size={16} />
                删除
              </Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];

  return (
    <div ref={ref} className="qa-list-table">
      <Table
        rowClassName="cursor-pointer api-table"
        rowKey="id"
        className="common-scrollbar"
        columns={columns}
        dataSource={datas}
        pagination={false}
        rowSelection={rowSelection}
        locale={{
          emptyText: <NotData />,
        }}
      />
    </div>
  );
};

export default memo(QAList);
